<template>
    <div>
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">expand</el-radio-button>
            <el-radio-button :value="true">collapse</el-radio-button>
        </el-radio-group> -->
        <el-menu :default-active="route.path" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            router @close="handleClose" style="text-align: center;">
            <img style="width: 120px;" src="https://heimahr.itheima.net/static/img/logo.2201adab.png" alt="">
            <el-menu-item :index="item.path" v-for="item in leftlist" :key="item.path">
                <el-icon><icon-menu /></el-icon>
                <template #title>{{ item.meta?.title }}</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { getUserInfo, getNotice, readNotice, deleteNotice } from '@/api/home'

import { useRouter, useRoute } from 'vue-router'
defineProps(['userData', 'isCollapse'])
const router = useRouter()
const route = useRoute()
let newlist = ref(router.getRoutes().reverse().filter(item => item.meta.title && item.name != 'home' && item.meta.names != 'home'))
let leftlist: any = ref([])
// console.log(router.getRoutes());
getUserInfo().then(res => {
    res.data.data.roles.menus = [
        ...res.data.data.roles.menus,
        'index'
    ]
    newlist.value.forEach((item: any) => {
        if (res.data.data.roles.menus.includes(item.name)) {
            leftlist.value.push(item)
        }
    });
})

const handleOpen = (key: string, keyPath: string[]) => {
}
const handleClose = (key: string, keyPath: string[]) => {
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    height: 100vh;
    overflow: hidden;
    background-color: #121e41;


    li {
        color: #a7acba
    }

    .el-menu-item:hover {
        background-image: linear-gradient(to right, #1f55e5 40%, rgba(0, 0, 0, 0));
        color: white;
    }

    .is-active {
        background-image: linear-gradient(to right, #1f55e5 40%, rgba(0, 0, 0, 0));
        color: white;
    }
}
</style>